<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Introduction to JavaScript GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, JavaScript, Introduction, Linux">
<meta name="description" content="This is an introductory part of the JavaScript GTK tutorial. We will have
some basic code examples.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to JavaScript GTK</h1>

<p>
In this part of the JavaScript GTK programming tutorial, we will introduce the GTK library and
create our first programs using the JavaScript programming language.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The purpose of this tutorial is to get you started with the GTK and JavaScript. 
GTK is one of the leading toolkits for creating graphical user interfaces.
JavaScript is a popular scripting language used mainly in browsers. In the
recent years, JavaScript has made its way to other areas including user interface
programming on desktops.
</p>



<h2>Seed</h2>

<p>
Seed is a JavaScript interpreter and a library of the GNOME project 
to create standalone applications in JavaScript. It uses the JavaScript 
engine JavaScriptCore of the WebKit project. (Wikipedia)
</p>

<p>
Seed uses GObject introspection to access Gnome libraries. GTK
is one of the Gnome libraries. 
</p>

<h2>Simple example</h2>

<p>
In the first example, we create a simple window. The window is
centered on the screen. The code is written in a procedural style.
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This program centers a window on 
the screen.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);

window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL });

window.signal.hide.connect(Gtk.main_quit);
window.set_default_size(250, 200);
window.set_title("Center");
window.set_position(Gtk.WindowPosition.CENTER);

window.show();

Gtk.main();
</pre>

<p>
This example shows a 250x200 px window in the center of the screen.
</p>

<pre class="explanation">
Gtk = imports.gi.Gtk;
</pre>

<p>
We import the Gtk library.
</p>

<pre class="explanation">
Gtk.init(null, null);
</pre>

<p>
This line initializes the GTK library for use.
</p>

<pre class="explanation">
window = new Gtk.Window({ type: Gtk.WindowType.TOPLEVEL });
</pre>

<p>
This line creates a toplevel <b>Window</b>. 
The Window is a container. The main application window is in 
most cases (but not always) a toplevel window.
</p>

<pre class="explanation">
window.signal.hide.connect(Gtk.main_quit);
</pre>

<p>
Here we connect the hide signal to a callback. 
The <b>main_quit()</b> method quits the application for good.
The hide signal is emitted, when we click on the close button 
in the titlebar. Or press Alt + F4. 
</p>

<pre class="explanation">
window.set_default_size(250, 200);
</pre>

<p>
We set a default size for the application window. 
</p>

<pre class="explanation">
window.set_title("Center");
</pre>

<p>
We set a title for the window using the <b>set_title()</b> method.
</p>


<pre class="explanation">
window.set_position(Gtk.WindowPosition.CENTER);
</pre>

<p>
This line centers the window on the screen. 
</p>


<pre class="explanation">
window.show();
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>

<pre class="explanation">
Gtk.main();
</pre>

<p>
We set up the application. An infinite loop is
created. From this point the application sits and waits
for external events from the user or the system. The loop runs
until it is terminated. 
</p>

<hr class="btm">

<p>
We have the same code example written in object-oriented 
style. JavaScript supports object-oriented programming to 
some extent. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This program centers a window on 
the screen.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {

        init_ui(this);
        
        function init_ui(w) {
      
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Center");
            w.set_position(Gtk.WindowPosition.CENTER);    
            w.show();
        }
    }    
});

var window = new Example();
Gtk.main();
</pre>

<p>
Code example. 
</p>

<pre class="explanation">
Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {
</pre>

<p>
We create a new type. It inherits from the GTK Window widget.
We put the code into the init method of the type. 
</p>


<h2>Creating a Tooltip</h2>

<p>
The second example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This code shows a tooltip on 
a window and a button.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);


Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {

        init_ui(this);
        
        function init_ui(w) {
      
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Center");
            w.set_position(Gtk.WindowPosition.CENTER);    
            
            var fix = new Gtk.Fixed();
                  
            var button = new Gtk.Button({ label: "Button" });
            button.set_size_request(80, 35);     
            button.set_tooltip_text("Button widget");

            fix.put(button, 50, 50);

            win.set_tooltip_text("Window widget");            
            
            w.show_all();
        }
    }    
});

var window = new Example();
Gtk.main();
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>


<pre class="explanation">
button.set_tooltip_text("Button widget");
</pre>

<p>
We set a tooltip with the <b>set_tooltip_text()</b> method.
</p>

<img src="/img/gui/jsgtk/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This program creates a quit
button. When we press the button,
the application terminates. 

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);


Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {

        init_ui(this);
        
        function init_ui(w) {
          
            var fix = new Gtk.Fixed();              
            var btn = new Gtk.Button({ label: "Quit" });
            
            btn.signal.clicked.connect(Gtk.main_quit);
            btn.set_size_request(80, 35);     

            fix.put(btn, 50, 50);    
            
            w.add(fix);
            
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Quit button");
            w.set_position(Gtk.WindowPosition.CENTER);
            w.show_all();  
        }
    }    
});

var window = new Example();
Gtk.main();
</pre>

<p>
We use a <b>Button</b> widget. This is a very common widget.
It shows a text label, image or both. 
</p>

<pre class="explanation">
init_ui(this);
</pre>

<p>
We delegate the creation of the user interface to the <b>init_ui()</b> method.
</p>

<pre class="explanation">
var btn = new Gtk.Button({ label: "Quit" });
</pre>

<p>
Here we create a button widget. 
</p>

<pre class="explanation">
btn.signal.clicked.connect(Gtk.main_quit);
</pre>

<p>
We plug the <b>main_quit()</b> method to the
button <b>clicked</b> signal.
</p>

<pre class="explanation">
btn.set_size_request(80, 35);
</pre>

<p>
We set a size for a button.
</p>

<pre class="explanation">
fix.put(btn, 50, 50);
</pre>

<p>
We put the quit button into the fixed container at x=50, y=50.
</p>

<pre class="explanation">
w.show_all(); 
</pre>

<p>
We have two options. Either to call <b>show()</b> on all widgets, or to call
<b>show_all()</b>, which shows the container and all its children. 
</p>

<img src="/img/gui/jsgtk/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<p>
This section was an introduction to the GTK library with the JavaScript language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified August 4, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
